<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }
        #box{
            width: 800px;
            height: 200px;
            border: 1px solid #ddd;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        #box ul{
            width: 1300px;
            position: absolute;
            left: 0;
            top:15px;

        }
        #box ul li{
            float: left;
        }
        #box_bottom{
            width: 100%;
            height: 25px;
            position: absolute;
            bottom: 0;
            left:0;
            background-color: #00BDFF;
        }
        .mask{
            position: absolute;
            left: 0;
            top:0;
           /* width: 50px;*/
            height: 25px;
            background-color: orangered;
            border-radius: 12px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="box">
    <ul id="box_top">
        <li><img src="images/img1.jpg" alt=""></li>
        <li><img src="images/img2.jpg" alt=""></li>
        <li><img src="images/img3.jpg" alt=""></li>
        <li><img src="images/img4.jpg" alt=""></li>
        <li><img src="images/img5.jpg" alt=""></li>
        <li><img src="images/img6.jpg" alt=""></li>
        <li><img src="images/img7.jpg" alt=""></li>
        <li><img src="images/img8.jpg" alt=""></li>
    </ul>
    <div id="box_bottom">
        <span class="mask"></span>
    </div>
</div>
<script>
    window.onload = function () {
        var box = document.getElementById("box");
        var box_top = document.getElementById("box_top");
        var box_bottom = document.getElementById("box_bottom");
        var mask = box_bottom.children[0];
        var box_len = (box.offsetWidth / box_top.offsetWidth) * box.offsetWidth;
        mask.style.width = box_len+"px"
        mask.onmousedown=function (event) {
            var e = event || window.event;
            var offsetleft= e.clientX-mask.offsetLeft;
            document.onmousemove=function (event) {
                var e = event||window.event
                var x = e.clientX- offsetleft;
                if (x<0){
                    x=0;
                }else if(x>=box.offsetWidth - mask.offsetWidth){
                    x=box.offsetWidth - mask.offsetWidth;
                }
                mask.style.left=x+"px";
                var content_len = (box_top.offsetWidth - box.offsetWidth) / (box.offsetWidth - mask.offsetWidth) * x;

                box_top.style.left = -content_len+"px";
                return false;
            }
            document.onmouseup=function () {
                document.onmousemove=null;
            }
        }
    }
</script>
</body>
</html>